<template>
  <div class="app-container box">
    <el-row>
      <el-col :span="24">
        <el-card shadow="never">
          <el-row :gutter="20">
            <el-col :span="4" v-for="(item,index) in effects" :key="index">
              <div class="cssfx-container-card">
                <component :is="item"></component>
              </div>
            </el-col>

          </el-row>

        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import effects from '@/effects'
export default {
  name: 'cssfx',
  data() {
    return {
      effects: effects
    }
  },
}
</script>

<style scoped lang="scss">
.box {
  .cssfx-container-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100px;
    margin-bottom: 20px;
    color: white;
    background: #090821;
    border-radius: 2.5px;
    span{
      font-size: 14px;
    }
    button {
      font-size: 14px !important;
    }
   div{
     ::v-deep input{
       height: 30px;
       width: 100px;
       &::placeholder {
         text-align: center;
         line-height: 1.5em;
         font-size: 14px;
       }
     }
   }
  }
}
</style>
